<template>
    <div class="meterialClass">
        <div class="header">
            <span>编辑耗材分类</span>
            <div>
                <el-button type="primary" @click="add(0)" plain>新增顶级分类</el-button>
                <el-button type="primary" plain @click="updataOrder">更新排序</el-button>
            </div>
        </div>
        <el-tree :data="meterialClassData" ref='mytree' :props="defaultProps" default-expand-all node-key="id" :default-expanded-keys="defaultIds" :expand-on-click-node="true">
            <span class="meterialClass-tree-node" slot-scope="{ node, data }"  :ref='`myspan`+data.id'>
                <span class="over-text" >{{ node.label}}</span>
                <span  class="operate">
                    <el-link  icon="el-icon-edit" :underline="false" @click.stop="() => edit(data)" type="primary">编辑</el-link>
                    <span>
                        <el-link v-show="data.pid==0"  class="firstLink" :underline="false" @click.stop="() => add(data.id)" type="primary">新增子类</el-link>
                        <el-link  style="margin-right:58px" :underline="false" @click.stop="() => remove(data,node)" type="primary">删除</el-link>
                        <el-input  v-model="data.index" ></el-input>
                    </span>
                </span>
            </span>
        </el-tree>
    </div>
</template>

<script>
/* eslint-disable */ 
import {getCategoriesApi } from "@/api" 
import {delCategory , createCategory , updateCategoryName,orderCategory} from "../api"
export default {
    name:"meterialClass",
    data(){
        return {
            clickId:"",
            meterialClassData:[],
            defaultProps: { children: 'cate',label: 'category_name'},
            defaultIds:[],
        }
    },
    created(){
        this.getData()
    },
    methods:{
        /**获取全部耗材分类 */
        getData(){
            getCategoriesApi({category_type:1,wh_id:this.$store.state.warehouseOfAssetsManager}).then(res=>{
                res.forEach((element,index) => {
                   element.index = index+1 
                   if(element.cate&&element.cate.length){
                       element.cate.forEach((ele,idx)=>{
                           ele.index = idx+1
                       })
                   }
                });
                this.meterialClassData = res
            })
        },
        /**新增 */
        add(data){
            if(!this.$store.state.warehouseOfAssetsManager) return this.$message('请先选择仓库');
            createCategory({category_type:1,wh_id:this.$store.state.warehouseOfAssetsManager,pid:data}).then(res=>{
                 this.getData()
            })
        },
        /**编辑 */
        edit(data){
              this.$prompt('请输入分类名称', '新增子类', {
                inputValue:data.category_name,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern:/^[\s\S]{1,64}$/,
                inputErrorMessage: '只允许输入64个字符',
            }).then(({ value }) => {
                if(!this.$store.state.warehouseOfAssetsManager) return this.$message('请先选择仓库');
                updateCategoryName({category_name:value,id:data.id}).then(res=>{
                    this.getData();
                })
            });
        },
        /**删除 */
        remove(data){
             this.$confirm(`即将删除"${data.category_name}", 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delCategory({category_type:1,id:data.id}).then(res=>{
                    this.getData();
                });
            });
        },
        /**更新排序 */
        updataOrder(){
            if(!this.meterialClassData||this.meterialClassData.length==0)return this.$message('列表为空，没有数据可以排序');
            let arr = []
            this.meterialClassData.forEach(item=>{
               let obj = {id:item.id,sort_order:item.index}
               arr.push(obj)
               if(item.cate&&item.cate.length>0){
                   item.cate.forEach(ele=>{
                        let objSon = {id:ele.id,sort_order:ele.index}
                        arr.push(objSon)
                   })
               }
            })
            orderCategory({data:JSON.stringify(arr)}).then(res=>{
                    this.getData();
            })
        }
    },
}
</script>

<style lang='stylus' >
.meterialClass
    padding 40px
    background-color #fff
    .header
        line-height : 50px;
        background-color: rgba(247, 245, 251, 1);
        padding 0 27px 0 20px 
        display flex
        justify-content space-between
        >span 
            color: rgba(25, 31, 37, 1);
            font-size: 16px;
    .meterialClass-tree-node
        display flex
        align-items center
        padding-right 42px
        width 100%
    .over-text
        color: rgba(16, 16, 16, 1);
        font-size: 14px;
    .operate
        flex 1
        padding-left 30px
        display inline-flex
        justify-content space-between
        .firstLink
            padding-right 10px
            margin-right 10px
            border-right 1px solid  #E9E9E9

</style>
<style lang="stylus">
.meterialClass
    .el-tree-node__content
        height 48px
        border 1px solid rgb(245,245,245)
        border-top none
        .el-input--small .el-input__inner
            width: 50px;
            height: 26px;
            line-height: 15px;
            border-radius: 3px;
            background-color: rgba(245, 245, 245, 1);
            color: rgba(49, 150, 250, 1);
            font-size: 10px;
            text-align: center;
            font-family: Roboto;
            border: 1px solid rgba(255, 255, 255, 0);
</style>
